<template>
  <div>
    <el-button  class="add-pet" type="success" @click="add">添加宠物模板</el-button>
    <el-table border :data="list" stripe :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column prop="pet_name" label="宠物名">
        </el-table-column>
        <el-table-column prop="degree" label="阶段">
        </el-table-column>
        <el-table-column prop="hp" label="耐久">
        </el-table-column>
        <el-table-column prop="atk" label="攻击">
        </el-table-column>
        <el-table-column prop="sp" label="速度">
        </el-table-column>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDetail(scope.row)">详情</el-button>
        </template>
        </el-table-column>
    </el-table>
   
    <common-modal v-show="is_show" v-on:closeme="closeAdd" v-on:confirm="confirmAdd">
            <h3 slot="header-title">新增宠物模板</h3>
            <div slot="body"  class="add-new-item">
                宠物名：<el-input v-model="pet_template.pet_name" placeholder="请输入宠物名"></el-input>
            </div>
            <div slot="body" class="add-new-item">
                图标：<input type="file" @change="iconUpload" ref="icon_upload" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg">
            </div>
            <div slot="body" class="add-new-item">
                阶段：  
                <el-select v-model="pet_template.degree" placeholder="请选择">
                    <el-option
                    v-for="item in degrees"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div slot="body" class="add-new-item">
                <el-input type="number" v-model="pet_template.hp" placeholder="请输入耐久值"></el-input>
            </div>
            <div slot="body" class="add-new-item">
                <el-input type="number" v-model="pet_template.atk" placeholder="请输入攻击值"></el-input>
            </div>
            <div slot="body" class="add-new-item">
                <el-input type="number" v-model="pet_template.sp" placeholder="请输入速度值"></el-input>
            </div>
            <div slot="body" class="add-new-item">
                <el-input type="number" v-model="pet_template.ev_lv" placeholder="请输入进化等级"></el-input>
            </div>
            <div slot="body" class="add-new-item">
                <el-input type="number" v-model="pet_template.default_lv" placeholder="请输入默认等级"></el-input>
            </div>
            <div slot="body" class="add-new-item">
                进化路线图：<input type="file" @change="mapUpload" ref="map_upload" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg">
            </div> 
     
    </common-modal>
    <common-modal v-show="is_show_detail" v-on:closeme="closeDetail" v-on:confirm="closeDetail">
        <h3 slot="header-title">宠物模板详情</h3>
        <div slot="body" class="detail-item">
            <h3>宠物名：{{cur_select_pet_template.pet_name}}</h3>
        </div>
        <div slot="body" class="detail-item">
            图标：
            <a :href="cur_select_pet_template.icon" target="_blank">
                    <img class="icon" :src="cur_select_pet_template.icon" alt="">
                </a>
        </div>
        <div slot="body" class="detail-item">
            <h3>耐久：{{cur_select_pet_template.hp}}</h3>
        </div>
        <div slot="body" class="detail-item">
            <h3>攻击：{{cur_select_pet_template.atk}}</h3>
        </div>
        <div slot="body" class="detail-item">
           <h3> 速度：{{cur_select_pet_template.sp}}</h3>
        </div>
        <div slot="body" class="detail-item">
           <h3> 阶段：{{cur_select_pet_template.degree}}</h3>
        </div>
        <div slot="body" class="detail-item">
            <h3>进化等级：{{cur_select_pet_template.ev_lv}}</h3>
        </div>
        <div slot="body" class="detail-item">
            <h3>默认等级：{{cur_select_pet_template.default_lv}}</h3>
        </div>
        <div slot="body" class="detail-item">
            进化路线图：
            <a :href="cur_select_pet_template.ev_map" target="_blank">
                <img class="map" :src="cur_select_pet_template.ev_map" alt="">
            </a>
        </div>
       
    </common-modal>
  </div>
</template>

<script>
  import commonModal from '../../components/commonModal.vue'
  export default{
    components:{
        'common-modal':commonModal
    },      
      data(){
          return {
              pet_template:{
                "pet_name": "",
                "pet_icon":"",
                "degree": "",
                "hp": 0,
                "atk": 0,
                "sp": 0,
                "ev_lv": 1,
                "ev_ids": [],//复选框
                "pre_id": "",//单选框
                "default_lv": 0,
                "ev_map": ""
              },
              list:[],
              degrees:[
                  {
                      "value":"egg",
                      "label":"蛋"
                  },
                  {
                      "value":"child",
                      "label":"幼年期"
                  },
                  {
                      "value":"growing",
                      "label":"成长期"
                  },
                  {
                      "value":"maturation",
                      "label":"成熟期"
                  }
              ],
              cur_select_pet_template:{},
              is_show:false,
              is_show_detail:false,
              test:""
          }
      },
      mounted:function(){
        this.getPetTemplates()
      },
      methods:{
          add(row){
              this.is_show=true;
          },
          iconUpload(){

            let reads = new FileReader();
            var f = this.$refs.icon_upload.files[0];
            console.log(f)
            reads.readAsDataURL(f);
            reads.onloadend=(e) =>{
                let src=e.target.result
                this.pet_template.icon=src
            } 

        },
        mapUpload(){

            let reads = new FileReader();
            var f = this.$refs.map_upload.files[0];
            console.log(f)
            reads.readAsDataURL(f);
            reads.onloadend=(e) =>{
                let src=e.target.result
                this.pet_template.ev_map=src
            } 
        },
          showDetail(row){
              this.cur_select_pet_template=row
              this.is_show_detail=true
          },
          closeDetail(){
              this.is_show_detail=false
          },
          getPetTemplates(){
            this.$ajax({
                method: 'get',
                url: 'get_all_pet_templates',

            }).
            then(res => {
                this.list=res.data.res_msg
                console.log(res)
            });               
          },
          closeAdd(){
              this.is_show=false;
          },

          confirmAdd(){
              //这里调接口
              this.is_show=false;
              console.log(this.pet_template);

            this.$ajax({
                method: 'post',
                url: 'add_pet_template',
                data: this.pet_template
            }).
            then(res => {
                this.getPetTemplates()
                this.$message.success("新增成功！");
                
            });                
              
          },
      },
  }
</script>


<style lang="scss" scoped>
    .add-pet{
        margin: 0 0 2% 0 ;
    }
    .page{
        margin-top: 1%;
        margin-left: 75%;
        margin-left: 80%;
    }
    .detail-item{
        width:50%;
        margin: 3% auto;
    }

    .detail-item .icon{
        width: 50px;
        height: 50px;
    }
    .detail-item .map{
        width: 60px;
        height: 40px;
    }
    .add-new-item{
        margin-top:3%;
    }
</style>
